<template>
	<view>
		<u-navbar back-text="返回" title="修改项目经验" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="top-fill">

					</view>
					<view class="clear-all" @click="submit">
						完成
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" :error-type=" ['toast']" :label-style="{fontSize:'28rpx',color:'rgba(153,153,153,1)'}">
				<u-form-item label="项目时间" prop="content" label-position="top">
					<view class="time-box">
						<view class="start-time" @click="showStartTime=true">
							<view class="start-text">
								{{ form.startTime }}
							</view>
							<view class="right-icon">
								<image src="../../../static/images/common/select-icon.png" mode=""></image>
							</view>
						</view>
						<view class="time-fill">
							——
						</view>
						<view class="start-time" @click="showEndTime=true">
							<view class="start-text">
								{{ form.endTime }}
							</view>
							<view class="right-icon">
								<image src="../../../static/images/common/select-icon.png" mode=""></image>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="所在城市:" prop="name">
					<view class="work-status" @click="showCity=true">
						<image src="../../../static/images/common/right.png" mode=""></image>
						{{ form.city }}
					</view>
				</u-form-item>
				<u-form-item label="详细地址" prop="name" label-position="top">
					<u-input class="name" :custom-style="style" v-model="form.address" :clearable="false" input-align="left" />
				</u-form-item>
				<u-form-item label="添加图片" prop="name" label-position="top" :border-bottom="false">
					<view class="addimg-box">
						<view class="add-box">
							<image src="../../../static/images/login/addcard.png" mode=""></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="职位描述" prop="content" label-position="top" :border-bottom="false">
					<textarea class="textarea" placeholder-class="pleace" placeholder="请输入职位描述(200以内)" maxlength="5"/>
				</u-form-item>
			</u-form>
		</view>
		<u-picker mode="time" v-model="showStartTime" :params="params" @confirm="selectStartTime"></u-picker>
		<u-picker mode="time" v-model="showEndTime" :params="params" @confirm="selectEndTime"></u-picker>
		<u-picker v-model="showCity" mode="region" :params="params" :default-region="['四川省', '成都市']" @confirm="selectCity"></u-picker>
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default {
		mixins: [multipleMixin],
		data() {
			return {
				showStartTime: false,
				showEndTime: false,
				showCity:false,
				style: {
					'fontSize': '32rpx',
					color: 'rgba(102,102,102,1)'
				},
				form: {
					startTime: '2020.02.02',
					endTime: '2020.06.02',
					city:'',
					address:'',
					imgList:[]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			selectStartTime(e) {
				let startTime = e.year + '.' + e.month + '.' + e.day;
				this.form.startTime = startTime;
			},
			selectEndTime(e) {
				let endTime = e.year + '.' + e.month + '.' + e.day;
				this.form.endTime = endTime;
			},
			selectCity(e){
				this.form.city = e.city.label;
			},
			submit() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			display: flex;

			.top-fill {
				flex: 1;
			}

			.clear-all {
				font-size: 28rpx;
				line-height: 44rpx;
				color: rgba(211, 176, 104, 1);
				opacity: 1;
			}
		}
	}

	.content {
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;

		.time-box {
			display: flex;
			width: 100%;

			.start-time {
				display: flex;
				width: 280rpx;
				justify-content: space-between;

				.start-text {
					font-size: 32rpx;
					font-weight: 400;
					line-height: 43rpx;
					color: rgba(102, 102, 102, 1);
					opacity: 1;
				}

				.right-icon {
					width: 24rpx;

					image {
						width: 24rpx;
						height: 14rpx;
						vertical-align: text-top;
					}
				}
			}

			.time-fill {
				line-height: 43rpx;
				margin: 0 40rpx;
			}
		}
		.work-status {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 43rpx;
			color: rgba(102, 102, 102, 1);
			opacity: 1;
		
			image {
				width: 14rpx;
				height: 24rpx;
				margin-top: 12rpx;
				margin-left: 24rpx;
			}
		}
		.textarea{
			width: 100%;
			height: 284rpx;
			background:rgba(246,246,246,1);
			border-radius:10rpx;
			padding: 28rpx 26rpx;
			box-sizing: border-box;
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			opacity:1;
		}
		.pleace{
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(153,153,153,1);
			opacity:1;
		}
		.addimg-box{
			width: 100%;
			display: flex;
			.add-box{
				width: 200rpx;
				height: 200rpx;
				background-color: #fff;
				border: 1rpx dashed rgba(223,223,223,1);
				border-radius: 10rpx;
				padding: 68rpx;
				box-sizing: border-box;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			image{
				margin-right: 10rpx;
			}
		}
	}
</style>
